<template>
	<div class="mobile">
		<header>
			<div class="logo"><img src="../../../assets/img/logo.png" alt=""></div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<swiper :options="swiperOption" ref="mySwiper">
						<swiper-slide class="swiper-slide" v-for="item in newsList" ><img :src="item.thumbnailUrl" alt="">
							<p>{{item.title}}</p>
						</swiper-slide>
						<div class="swiper-pagination" slot="pagination"></div>
					</swiper>
				</div>
				<div ref="paginationBullets" class="swiper-pagination" slot="pagination"></div>
			</div>
		</header>
		<div class="content">
			<div class="tips">
				<div class="left">消息<br>通知</div>
				<div class="middle"  @click="goNews(notice.category)">
					<div class="tit">{{ notice.title }}</div>
					<div class="date">{{ notice.publishTime }}</div>
				</div>
				<div class="right">></div>
			</div>
			<router-link to="/portal/netm">
			<div class="net">
				<div class="left">网谷里面对面</div>
				<div class="right">></div>
			</div>
		</router-link>
			<div class="title">
				人大概况
			</div>
			<div class="trends">
				<div class="item" @click="goCloumn('41')">
					<div class="top">常委会公报</div>
					<div class="bottom">重要决策、政策和工作安排</div>
				</div>
				<div class="item" @click="goSituation('12')">
					<div class="top">制度建设</div>
					<div class="bottom">重要决策、政策和工作安排</div>
				</div>
				<div class="item" @click="goSituation('18')">
					<div class="top">机构设置</div>
					<div class="bottom">人大简介、领导分工</div>
				</div>
				<div class="item" @click="goSituation('14')">
					<div class="top">人事任免</div>
					<div class="bottom">职务调整、人才选拔</div>
				</div>
				<div class="item" @click="goSituation('19')">
					<div class="top">职能介绍</div>
					<div class="bottom">职责分工、服务决策</div>
				</div>
				<div class="item">
					<div class="top" @click="goSituation('15')">资料库</div>
					<div class="bottom">信息检索、数据下载</div>
				</div>
			</div>
			<div class="title">
				专题专栏
			</div>
			<div class="cloumn">
				<div class="item" @click="goCloumn('42')">
					<img src="../../../assets/img/phone-cloumn1.png" alt="">
					<div class="txt">人代会专题</div>
				</div>
				<div class="item" @click="goCloumn('43')">
					<img src="../../../assets/img/phone-cloumn2.png" alt="">
					<div class="txt">代表“三进”</div>
				</div>
				<div class="item" @click="goCloumn('44')">
					<img src="../../../assets/img/phone-cloumn3.png" alt="">
					<div class="txt">议案建议</div>
				</div>
			</div>
			<div class="title">
				工作动态
				<div class="more">
					<router-link to="/portal/newsm">更多</router-link>
				</div>
			</div>
			<div class="situation">
				<div class="tab-bar">
					<div class="tab" :class="{ 'active': item.checked }" v-for="item in TabList"
					@click="goTabItem(item.id)" v-if="item.isShow == '1'">{{ item.name }}</div>
				</div>
				<div class="list">
					<a class="item" v-for="item in newsList"  @click="goNews(item.category)">
						<div class="left">
							<img :src="item.attachmentUrl">
						</div>
						<div class="right">
							<div class="text">{{ item.title }}</div>
							<div class="detail">
								{{ item.articlesDb }}
							</div>
							<div class="time">{{ item.publishTime }}</div>
						</div>
					</a>
				</div>
			</div>
		</div>
		<footer>
			<div class="select-group">
				<select @change="goLink" v-model="link">
					<option :value="''">省市政府网站</option>
					<option v-for="item in linkList" :value="item.hyperlink" v-if="item.mainId == 0">
						{{ item.hyperlinkName }}</option>
				</select>
				<select>
					<option :value="''">市级政府部门网站</option>
					<option v-for="item in linkList" :value="item.hyperlink" v-if="item.mainId == 1">
						{{ item.hyperlinkName }}</option>
				</select>
				<select>
					<option :value="''">本市重要机构</option>
					<option v-for="item in linkList" :value="item.hyperlink" v-if="item.mainId == 2">
						{{ item.hyperlinkName }}</option>
				</select>
				<select>
					<option :value="''">相关网站链接</option>
					<option v-for="item in linkList" :value="item.hyperlink" v-if="item.mainId == 3">
						{{ item.hyperlinkName }}</option>
				</select>
			</div>
			<div class="contact">
				<a href="">省政府网站</a><span>|</span>
				<a href="">常见问题</a><span>|</span>
				<a href="">隐私申明</a><span>|</span>
				<a href="">联系我们</a>
			</div>
		</footer>
	</div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { getPageData, getArticleDetail,getAllLink} from "@/api/website";


export default {
	data() {
		return {
			notice: {},
			TabList: [],
			newsList: [],
			swiperOption: {
				loop: true,
				observer: true,//修改swiper自己或子元素时，自动初始化swiper
				observeParents: true,//修改swiper的父元素时，自动初始化swiper
				autoplay: {
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: false
				},
				// 显示分页
				pagination: {
					el: ".swiper-pagination",
					clickable: true //允许分页点击跳转
				},
				// 设置点击箭头
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev"
				}
			},
			linkList: [],
			link:""
		}
	},
	components: {
		swiper,
		swiperSlide
	},
	created() {
		this.init();
	},
	mounted() {
	},
	methods: {
		init() {
			this.loading = true;
			//通知公告
			getArticleDetail({ id: 40 }).then(response => {
				this.notice = response.rows[0];
				this.notice.articlesDb = this.notice.articlesDb.replace(/[^\u4e00-\u9fa5]/g, '')
			});
			//工作动态 街道人大动态 标题
			getPageData({ id: 4 }).then(response => {
				this.TabList = response.data.childrenCategory;
				this.TabList[0].checked = true;
				this.getnewsList(this.TabList[0].id)
			});
			getAllLink({}).then(response => {
				this.linkList = response
			});
		},
		//工作动态 街道人大动态
		getnewsList(id) {
			getArticleDetail({ id: id }).then(response => {
				this.newsList = response.rows;
				for (const key in this.newsList) {
					this.newsList[key].articlesDb = this.newsList[key].articlesDb.replace(/[^\u4e00-\u9fa5]/g, '')
				}
			});
		},
		goTabItem(id) {
			for (const key in this.TabList) {
				if (this.TabList[key].id == id) {
					this.TabList[key].checked = true;
				} else {
					this.TabList[key].checked = false;
				}
			}
			this.getnewsList(id)
		},
		goLink(){
			window.open(this.link, "_blank");
		},
		goNews(id){
			this.$router.push({path: '/portal/newsm', query: {id: id}})
		},
		goCloumn(id){
			this.$router.push({path: '/portal/cloumnm', query: {id: id}})
		},
		goSituation(id){
			this.$router.push({path: '/portal/situationm', query: {id: id}})
		},
		goNet(){
			this.$router.push({path: '/portal/net/reprem'})
		}
	}
};
</script>

<style scoped lang="scss">
.mobile {
	background: #fff;
	padding-bottom: 0;
}
</style>